<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/login.css"/>
    <title>忘记密码-确认账户</title>
</head>
<body>
<div class="header">
    <div class="mainwarp">
        <div class="logo"><a href="index.jsp"><img src="images/log.png"/></a></div>
        <div class="welcome">重置密码</div>
        <div class="headerright">
            <a href="login.jsp">个人登录 </a>
            <span>|</span>
            <a href="index.jsp">返回首页</a>
        </div>
    </div>
</div>
<div class="passdBox">
    <div class="passpart1">
        <div class="TitleNotice">忘记密码了？根据收到的激活码进行验证身份，通过验证后重置密码，您就可以登录了。</div>
        <div class="StepsBox">
            <div id="step_div_1" class="Step Active stepfirst">
                <span class="StepNo">1</span>
                <span class="StepName">确认账户</span>
            </div>
            <div id="step_div_2" class="Step">
                <span class="StepNo">2</span>
                <span class="StepName">安全认证</span>
            </div>
            <div id="step_div_3" class="Step">
                <span class="StepNo">3</span>
                <span class="StepName">重置密码</span>
            </div>
            <div id="step_div_4" class="Step steplast">
                <span class="StepNo"></span>
                <span class="StepName">完成</span>
            </div>
        </div>
        <div class="clear"></div>
        <div id="step_1" class="restInfo">
            <div class="box1">
                <span>账   户：</span>
                <input id="PhoneOrEmail" name="" type="text" placeholder="用户名/邮箱/已验证手机号"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <span>验证码：</span>
                <input id="verificationCode" name="" type="text" class="yzm"/>
                <img src="images/VerifyCode.jpg" width="100" height="35"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <input id="next" name="" type="button" step_index="1" class="onebtn" value="下一步"/>
            </div>
        </div>
        <div id="step_2" class="restInfo" hidden>
            <div id="tishixinxi" class="box2">激活码已经发送到您的手机：152*******56 中</div>
            <div class="box1">
                <span>激活码：</span>
                <input id="autchode" name="" type="text" class="yzm"/>
                <b class="phonenum">获取短信验证码</b>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <input id="next2" name="" type="button" step_index="2" class="onebtn" value="下一步"/>
            </div>
        </div>
        <div id="step_3" class="restInfo" hidden>
            <div class="box2">
                <span class="span1">用户名：</span>
                <span id="unamespan" class="span2">EB5_14@your_email.com</span>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <span>新密码：</span>
                <input id="newpwd" name="" type="text"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <span>确认密码：</span>
                <input id="repwd" name="" type="text"/>
                <div class="clear"></div>
            </div>
            <div class="box1">
                <input id="next3" name="" type="button" step_index="3" class="onebtn" value="下一步"/>
            </div>
        </div>
        <div id="step_4" class="restInfo2" hidden>
            <div class="SucTitle">恭喜您，您的密码设置成功！</div>
            <p>您的用户名是：HEB5_14@your_email.com</p>
            <p>您可以使用新密码登录蝶飞人才网<a href="login.jsp">立即登录</a></p>
        </div>

    </div>
</div>
<div class="clear"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var regemial = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
    var regphone = new RegExp("^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-9])|(18[0-9])|166|198|199|191|(147))\\d{8}$");
    var uid = null
    var uname = null
    var uemail = null
    var uphone = null
    var phoneOrEmail = null;
    $(function () {
        $(".onebtn").on("click", function () {
            let stepIndex = $(this).attr("step_index");
            let stepId = '#step_' + stepIndex;
            stepIndex++;
            let divNextId = '#step_div_' + stepIndex;
            let stepNextId = '#step_' + stepIndex;
            $(stepId).hide();
            $(stepNextId).show();
            $(divNextId).addClass("Active");
        });
    });

    function formatVerification(phoneOrEmail) {
        if (regphone.test(phoneOrEmail)) {
            $.ajaxSettings.async = false;
            $.get("verificationUser.do", "uphone=" + phoneOrEmail, function (str) {
                eval("var user=" + str);
                uid = user.uid;
                uname = user.uname;
                uemail = user.uemail;
                uphone = user.uphone;
            })
            return uphone;
        } else if (regemial.test(phoneOrEmail)) {
            $.ajaxSettings.async = false;
            $.get("verificationUser.do", "uemail=" + phoneOrEmail, function (str) {
                eval("var user=" + str);
                uid = user.uid;
                uname = user.uname;
                uemail = user.uemail;
                uphone = user.uphone;
            })
            return uemail;
        } else {
            $.ajaxSettings.async = false;
            $.get("verificationUser.do", "uname=" + phoneOrEmail, function (str) {
                eval("var user=" + str);
                uid = user.uid;
                uname = user.uname;
                uemail = user.uemail;
                uphone = user.uphone;
            })
            return uname;
        }
    }


    $(document).ready(function () {
        var strV = "";
        for (var i = 0; i < 4; i++) {
            var j = Math.floor(Math.random() * 10);
            strV += j;
        }
        $("#verificationCode").val(strV)
        $("[id='PhoneOrEmail']").blur(function (str) {
            phoneOrEmail = $(this).val();
            var acconut=formatVerification(phoneOrEmail)
            if (acconut == "" || acconut == null || acconut==undefined) {
                window.location.reload()
            }

        })

        $("[id='next']").click(function () {
            var vcode = $("[id='verificationCode']").val();
            if (vcode == strV) {
                $("#tishixinxi").html("激活码已经发送到：" + uphone.substring(0, 3) + "****" + uphone.substring(7, 11) + "中")
            }

        })
        $(document).on("click", "b", function () {
            var s = "";
            for (var i = 0; i < 4; i++) {
                var j = Math.floor(Math.random() * 10);
                s += j;
            }
            $("#autchode").val(s)
        });
        $("[id='next2']").click(function () {
           if(uname!=null){
               $("#unamespan").html(uname)
           }else{
               $("#unamespan").html("未定义")
           }

        })

        $("[id='next3']").click(function () {
            var newpwd = $("[id='newpwd']").val();
            var repwd = $("[id='repwd']").val();
            if (newpwd == repwd) {
                $.get("upadteUserInfo.do", {"uid": uid, "upassword": newpwd}, function (i) {
                    if (i == "1" || i == 1) {
                        $("[id='step_4']").empty()
                        window.location.replace("login.jsp");
                        var obj =
                            "<div class='SucTitle'>恭喜您，您的密码设置成功！</div>" +
                            "<p>您的用户名是：" + uname + "</p>" +
                            "<p>您可以使用新密码登录蝶飞人才网<a href='login.jsp'>立即登录</a></p>"
                        $(obj).appendTo($("[id='step_4']"))
                    }
                })
            }
        })


    })
</script>
</html>
